// 搜索页面
import React, { useEffect, useState } from 'react'
import { NavBar, Search, Toast } from 'react-vant'
import { useNavigate } from 'react-router-dom'
import s from './style.module.less'
import MyIcon from '@/components/myIcon'
import cx from 'classnames'
import { useStore, observer } from '@/store'

const SearchPage=()=> {
    const { homeStore } = useStore()
    const [value, setValue] = useState('');
    const [showDelete, setShowDelete] = useState(false)
    const [historyArray, setHistoryArray] = useState(homeStore.historyArray)  // 将搜索记录放到仓库
    const navigate = useNavigate()

    const goToHome = () => {
        navigate('/')
    }
    const deleteHistory = () => {
        setShowDelete(true)
        homeStore.historyArray=[]
        setHistoryArray(homeStore.historyArray)
    }
    // 点击搜索按钮,讲记录push进搜索历史数组
    const search = (value) => {
        if (homeStore.historyArray.length <= 15) {    // 限制最大长度
            homeStore.addHistory(value)  // 从数组前面添加元素，这样后面的搜索历史就会到前面来
            console.log(homeStore.historyArray);
        } else { // 删除最后一条数据，增加到第一条
            homeStore.deleteHistory
            homeStore.addHistory(value)
        }
        console.log(homeStore.historyArray);
    }

    useEffect(() => {
        console.log(homeStore.historyArray);
    }, [homeStore.historyArray])

    return (
        <div className={s.main}>
            <NavBar
                title="搜索"
                onClickLeft={() => goToHome()}
            />

            <Search
                showAction
                actionText={<div onClick={() => goToHome()}>取消</div>}
                value={value}
                onChange={setValue}
                onSearch={() => search(value)}
                placeholder="请输入搜索关键词"
            />
            <div className={s.history}>
                <div className={s.top}>
                    <div className={s.title}>搜索历史</div>
                    <div className={cx({ [s.delete]: true, [s.hidden]: showDelete, [s.hidden]: historyArray.length === 0 })} onClick={() => deleteHistory()}><MyIcon name='icon-icon' /></div>
                </div>
                <div className={s.content}>
                    <div className={cx({ [s.noHistory]: true, [s.hidden]: historyArray.length !== 0 })}>试试搜索小区、楼盘等名称去寻找心仪房源吧</div>
                    <div className={cx({ [s.showHistory]: true, [s.hidden]: historyArray.length !== 0 })}>
                        {
                            homeStore.historyArray.map((item, index) => {
                                return <div className={s.searched} key={index}>{item}</div>
                            })
                        }


                    </div>
                </div>

            </div>

            <div className={s.show}>
                <div className={s.box}>
                    <div className={s.title}>110w的热门房源</div>
                    <div className={s.line}>
                        <div className={s.num}><MyIcon name="icon-daochu1024-26" /></div>
                        <div className={s.place}>新建城</div>
                    </div>
                    <div className={s.line}>
                        <div className={s.num}><MyIcon name="icon-daochu1024-27" /></div>
                        <div className={s.place}>新建城</div>
                    </div>
                    <div className={s.line}>
                        <div className={s.num}><MyIcon name="icon-daochu1024-28" /></div>
                        <div className={s.place}>新建城</div>
                    </div>
                    <div className={s.line}>
                        <div className={s.num}>4</div>
                        <div className={s.place}>新建城</div>
                    </div>
                    <div className={s.line}>
                        <div className={s.num}>5</div>
                        <div className={s.place}>新建城</div>
                    </div>
                    <div className={s.line}>
                        <div className={s.num}>6</div>
                        <div className={s.place}>新建城</div>
                    </div>
                    <div className={s.line}>
                        <div className={s.num}>7</div>
                        <div className={s.place}>新建城</div>
                    </div>
                    <div className={s.line}>
                        <div className={s.num}>8</div>
                        <div className={s.place}>新建城</div>
                    </div>
                    <div className={s.line}>
                        <div className={s.num}>9</div>
                        <div className={s.place}>新建城</div>
                    </div>
                    <div className={s.line}>
                        <div className={s.num}>10</div>
                        <div className={s.place}>新建城</div>
                    </div>
                    <div className={s.line}>
                        <div className={s.num}>11</div>
                        <div className={s.place}>新建城</div>
                    </div>
                    <div className={s.line}>
                        <div className={s.num}>12</div>
                        <div className={s.place}>新建城</div>
                    </div>
                    <div className={s.line}>
                        <div className={s.num}>13</div>
                        <div className={s.place}>新建城</div>
                    </div>
                    <div className={s.line}>
                        <div className={s.num}>14</div>
                        <div className={s.place}>新建城</div>
                    </div>
                    <div className={s.line}>
                        <div className={s.num}>15</div>
                        <div className={s.place}>新建城</div>
                    </div>
                </div>
                <div className={s.box}>
                    <div className={s.title}>110w的热门房源</div>
                    <div className={s.line}>
                        <div className={s.num}><MyIcon name="icon-daochu1024-26" /></div>
                        <div className={s.place}>新建城</div>
                    </div>
                    <div className={s.line}>
                        <div className={s.num}><MyIcon name="icon-daochu1024-27" /></div>
                        <div className={s.place}>新建城</div>
                    </div>
                    <div className={s.line}>
                        <div className={s.num}><MyIcon name="icon-daochu1024-28" /></div>
                        <div className={s.place}>新建城</div>
                    </div>
                    <div className={s.line}>
                        <div className={s.num}>4</div>
                        <div className={s.place}>新建城</div>
                    </div>
                    <div className={s.line}>
                        <div className={s.num}>5</div>
                        <div className={s.place}>新建城</div>
                    </div>
                    <div className={s.line}>
                        <div className={s.num}>6</div>
                        <div className={s.place}>新建城</div>
                    </div>
                    <div className={s.line}>
                        <div className={s.num}>7</div>
                        <div className={s.place}>新建城</div>
                    </div>
                    <div className={s.line}>
                        <div className={s.num}>8</div>
                        <div className={s.place}>新建城</div>
                    </div>
                    <div className={s.line}>
                        <div className={s.num}>9</div>
                        <div className={s.place}>新建城</div>
                    </div>
                    <div className={s.line}>
                        <div className={s.num}>10</div>
                        <div className={s.place}>新建城</div>
                    </div>
                    <div className={s.line}>
                        <div className={s.num}>11</div>
                        <div className={s.place}>新建城</div>
                    </div>
                    <div className={s.line}>
                        <div className={s.num}>12</div>
                        <div className={s.place}>新建城</div>
                    </div>
                    <div className={s.line}>
                        <div className={s.num}>13</div>
                        <div className={s.place}>新建城</div>
                    </div>
                    <div className={s.line}>
                        <div className={s.num}>14</div>
                        <div className={s.place}>新建城</div>
                    </div>
                    <div className={s.line}>
                        <div className={s.num}>15</div>
                        <div className={s.place}>新建城</div>
                    </div>
                </div>
                <div className={s.box}>
                    <div className={s.title}>110w的热门房源</div>
                    <div className={s.line}>
                        <div className={s.num}><MyIcon name="icon-daochu1024-26" /></div>
                        <div className={s.place}>新建城</div>
                    </div>
                    <div className={s.line}>
                        <div className={s.num}><MyIcon name="icon-daochu1024-27" /></div>
                        <div className={s.place}>新建城</div>
                    </div>
                    <div className={s.line}>
                        <div className={s.num}><MyIcon name="icon-daochu1024-28" /></div>
                        <div className={s.place}>新建城</div>
                    </div>
                    <div className={s.line}>
                        <div className={s.num}>4</div>
                        <div className={s.place}>新建城</div>
                    </div>
                    <div className={s.line}>
                        <div className={s.num}>5</div>
                        <div className={s.place}>新建城</div>
                    </div>
                    <div className={s.line}>
                        <div className={s.num}>6</div>
                        <div className={s.place}>新建城</div>
                    </div>
                    <div className={s.line}>
                        <div className={s.num}>7</div>
                        <div className={s.place}>新建城</div>
                    </div>
                    <div className={s.line}>
                        <div className={s.num}>8</div>
                        <div className={s.place}>新建城</div>
                    </div>
                    <div className={s.line}>
                        <div className={s.num}>9</div>
                        <div className={s.place}>新建城</div>
                    </div>
                    <div className={s.line}>
                        <div className={s.num}>10</div>
                        <div className={s.place}>新建城</div>
                    </div>
                    <div className={s.line}>
                        <div className={s.num}>11</div>
                        <div className={s.place}>新建城</div>
                    </div>
                    <div className={s.line}>
                        <div className={s.num}>12</div>
                        <div className={s.place}>新建城</div>
                    </div>
                    <div className={s.line}>
                        <div className={s.num}>13</div>
                        <div className={s.place}>新建城</div>
                    </div>
                    <div className={s.line}>
                        <div className={s.num}>14</div>
                        <div className={s.place}>新建城</div>
                    </div>
                    <div className={s.line}>
                        <div className={s.num}>15</div>
                        <div className={s.place}>新建城</div>
                    </div>
                </div>

            </div>
        </div>


    )
}

export default observer(SearchPage)
